<style lang="less" scoped>
.search-label {
  font-size: 14px;
  padding-right: 10px;
}
.search {
  width:400px;
  margin-left: 20px;
}
</style>

<template lang="pug">
#admin-comment.admin
  template
    span(class="search-label") 搜索方式:
    el-radio-group(v-model="selectType")
      el-radio(label="content") 内容
      el-radio(label="character") 文字
      el-radio(label="user") 用户
    el-input(class="search",placeholder='请输入文字搜索', icon='search', v-model='search', :on-icon-click='handleIconClick')
    el-table(:data='items', border='', style='width: 100%')
      el-table-column(type="index",align="center", width="100",label="索引")
      el-table-column(prop='content',align="center", label='评论内容')
      el-table-column(prop='char.charName',align="center", label='所属文字')
      el-table-column(prop='user.nickName',align="center", label='用户', width="150")
      el-table-column(prop='created_at',align="center", label='日期', width="200")
      el-table-column(prop='status',align="center", label='状态', width="150")
      el-table-column(label='操作',align="center")
        template(scope='scope')
          //- el-button(size='small', @click='handleEdit(scope.$index, scope.row)') 编辑
          el-button(size='small', type='danger', @click='handleDelete(scope.$index, scope.row)') 删除
  el-pagination(@size-change='handleSizeChange', @current-change='handleCurrentChange',  :current-page="1", :page-size='100', layout='total, prev, pager, next', :total='total')
</template>
<script>

export default {
  name: 'admin-comment',
  computed: {
    items() {
      return this.$store.state.adminItems
    },
    total() {
      return this.$store.state.count; // 列表总数
    },
  },
  data() {
    return {
      start: 0,
      search: '',
      formInline: {
        title: '',
        link: '',
      },
      selectType:'content', // 搜索方式
    }
  },
  methods: {
    fetch(start) {
      const _this = this
      const cb = function(result) {
        _this.$set(_this, 'start', start)
      }
      this.$store.dispatch('FETCH_ADMIN_ITEMS', {
        cb: cb,
        url: 'comments',
        params: {
          start: start,
          search: _this.search || null,
          type: _this.$route.params.type || null
        }
      })
    },
    handleIconClick() {
      this.fetch(0)
    },
    onSubmit() {
      if (!this.formInline.title || !this.formInline.link) { return }
      const _this = this
      this.$store.dispatch('ADD_COMMENT', {
        data: _this.formInline,
        cb: (data) => {
          if (data.data.code === 1000) {
            _this.$message('已新建评论');
            location.reload()
          }
        }
      })
    },
    handleDelete(index, row) {
      const _this = this
      this.$store.dispatch('DELETE_ADMIN_ITEM', {
        id: row._id,
        url: 'comment',
        msg: _this.$message,
        index: index
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.fetch(val - 1)
      console.log(`当前页: ${val}`);
    }
  },
  mounted() {
    this.fetch(0)
  },
  watch: {
    '$route.path'() {
      this.fetch(0)
    }
  }
}
</script>

<style lang="stylus" scoped>
.el-table, .el-pagination {
  margin-top: 20px;
}

.add-btn {
  margin-left: 30px;
}

.el-table {
  margin-top: 30px;
}
</style>
